.style-guide {
  position: relative;
  padding: 0;
  margin: 0;
  font: normal 14px/20px "Helvetica Neue", Helvetica, sans-serif;
}

.style-guide-content {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .style-guide-content {
      position: relative;
   }

  .style-guide-content .style-guide-sidebar {
    width: 20%;
  }

  .style-guide-content .style-guide-sidebar {
    position: absolute;
  }

  .style-guide-content .style-guide-sidebar.style-guide-fixed {
    position: fixed;
    top: 0;
    width: 144px;
  }

  .style-guide-content .style-guide-partials {
    width: 79%;
    margin-left: 21%;
    float: left;
  }
}

@media (min-width: 840px) {
  .style-guide-content .style-guide-sidebar {
    width: 25%;
  }

  .style-guide-content .style-guide-partials {
    width: 74%;
    margin-left: 26%;
    float: left;
  }

  .style-guide-content .style-guide-sidebar.style-guide-fixed {
    width: 210px;
  }
}

@media (min-width: 960px) {
  .style-guide-content {
    width: 960px;
  }

  .style-guide-content .style-guide-sidebar {
    width: 30%;
  }

  .style-guide-content .style-guide-partials {
    width: 69%;
    margin-left: 31%;
    float: left;
  }

  .style-guide-content .style-guide-sidebar.style-guide-fixed {
    width: 288px;
  }
}
